<template>
  <div class="list-supply-wrapper">
		<listtop></listtop>
		<selector @changeOrders="changeOrders"></selector>
    <scroller @loadEvent="freshDemands" ref="scroller">
      <div class="demand-list-scroll">
        <div class="demand-list-item" v-for="(data,index) in demandList" :key="index">
          <a :href="'#/trade/demand/' + data.id ">
              <div class="buy-wraper line-one">
                <div class="buy-name ellipsis">{{data.kind_name}}</div>
                <div class="buy-stone ellipsis">求购：<big>{{data.stock}}</big><span>斤</span></div>
              </div>
              <div class="buy-wraper line-two">
                <div class="buy-address ellipsis">
                  <label class="address-wrapper ellipsis">
                    <i class="address-icon"></i>
                  <span>{{data.province_name}}</span>
                  <span>{{data.city_name}}</span>
                </label>
                <label class="wl" v-show="data.logistics===1">
                  <i class="wl-car"></i>
                  <span>物流</span>
                </label>
                </div>
                <div class="buy-size ellipsis">规格：
                  <label v-if="data.size_unit_name"><span>{{data.size_min}}</span>-<span>{{data.size_max}}</span><span>{{data.size_unit_name}}</span></label>
                  <label v-else>不限</label>
                </div>
              </div>
              <div class="buy-wraper line-three">
                <div class="buy-autor">
                  <span class="name ellipsis"><span v-if="data.verify_classify" v-text="data.verify_name"></span><span v-else v-text="data.contact_name"></span></span>
                  <span class="verify-type firm-jxs" v-if="data.verify_classify==2&&data.verify_type==3"></span>
                  <span class="verify-type firm-pfs" v-if="data.verify_classify==2&&data.verify_type==13"></span>
                  <span class="verify-type own-jxs" v-if="data.verify_classify==1&&data.verify_type==3"></span>
                  <span class="verify-type own-pfs" v-if="data.verify_classify==1&&data.verify_type==13"></span>
                  <span class="verify-type own-yf" v-if="data.verify_classify==1&&data.verify_type==12"></span>
                  <span class="verify-type own-ywy" v-if="data.verify_classify==1&&data.verify_type==2"></span>
                  <span class="verify-type own-yzh" v-if="data.verify_classify==1&&data.verify_type==4"></span>
                  <span class="verify-type own-yzj" v-if="data.verify_classify==1&&data.verify_type==11"></span>
                </div>
                <div class="buy-time ellipsis">{{data.updated_view}}</div>
              </div>
              <div class="buy-requirement ellipsis" v-if="data.desc_tag.length || data.desc">
                具体要求：
              <span v-for="tab in data.desc_tag">{{tab}}</span>
              <label>{{data.desc}}</label>
              </div>
            </a>
        </div>
      </div>
    </scroller>
  </div>
</template>

<script>
import Listtop from "@/components/Listtop/Listtop.vue"
import Selector from "@/components/Selector"
import Scroller from "@/components/Scroller"

const getList = params =>
  axios.get("/api/trade/demand/getList", {
    params
  })

export default {
  data() {
    return {
      demandList: [],
      page: 1,
      pageSize: 10,
      orders: {
        kind_id: 0,
        order: 1,
        city: 0
      }
    }
  },
  created() {
    let querys = this.$route.query
    if (querys.kind_id) {
      this.orders.kind_id = Number(querys.kind_id)
    }
    if (querys.city) {
      this.orders.city = Number(querys.city)
    }
    if (querys.order) {
      this.orders.order = Number(querys.order)
    }
  },
  methods: {
    getParams() {
      const params = {
        page_size: this.pageSize,
        page: this.page,
        order: this.orders.order
      }
      if (this.orders.kind_id !== 0) {
        params.kind_id = this.orders.kind_id
      }
      if (this.orders.city !== 0) {
        params.city = this.orders.city
      }
      return params
    },
    changeOrders(orders) {
      let querys = {}
      querys.kind_id = orders.kind_id
      querys.city = orders.city
      querys.order = orders.order
      this.$router.push({ name: "demands", query: querys })
      this.orders = querys
      this.page = 1
      this.orders = orders
      this.demandList = []
      this.$refs.scroller.refresh()
    },
    async freshDemands({ loaded, nodata }) {
      const params = this.getParams()
      let res
      try {
        res = await getList(params)
      } catch (e) {
        throw new Error(e)
      }
      const data = res.data.resp_data.data
      if (res.data.resp_data.data.length) {
        this.demandList = this.demandList.concat(data)
        if (res.data.resp_data.data.length === this.pageSize) {
          loaded()
        } else {
          nodata()
        }
        this.page++
      } else {
        nodata()
      }
      return
    }
  },
  components: {
    Listtop,
    Selector,
    Scroller
  }
}
</script>

<style lang="scss">
@import url("../../../styles/common/trade/trade-common.css");

.list-supply-wrapper {
  width: 100%;
  #mt_selector {
    top: 45px;
  }
}
.demand-list-scroll {
  background: #eee;
}
</style>
